<template>
  <div>
    <van-nav-bar fixed placeholder>
      <template #left>
        <van-icon name="cross" color="#333333" size="16" />
      </template>
      <template #title>
        <p class="pageTitle">超声床边平台</p>
      </template>
      <template #right>
        <van-icon name="ellipsis" color="#333333" size="20" @click="showRight = true" />
      </template>
    </van-nav-bar>
    <div class="bg-Blue">
      <van-search v-model="options.name" shape="round" background="#84c5fb" placeholder="请输入内容" show-action
        @search="searchList">
        <template #label>
          <van-popover v-model="showPopover" trigger="click" :actions="actions" @select="onSelect">
            <template #reference>
              <span style="fontSize:14px">{{choseStatus.text}}</span>
            </template>
          </van-popover>
        </template>
        <template #left-icon>
          <van-icon name="arrow-down" size="12px" />
        </template>
        <template #right-icon>
          <van-icon name="search" size="16px" @click="searchList" />
        </template>
        <template #action>
          <van-icon name="replay" @click="clearSearch" />
        </template>
      </van-search>
      <p class="title">工作列表</p>
    </div>
    <div>
      <vue-hash-calendar :visible="true" isShowWeekView :isShowArrow="true" :scrollChangeDate="false" pickerType="date"
        @click="clickDate">
        <template #arrow="slot">
          <van-icon v-if="slot.show" name="arrow-down" />
          <van-icon v-else name="arrow-up" />
        </template>
      </vue-hash-calendar>
      <div id="department" class="department">
        <span>申请科室</span>
        <van-popover v-model="showDepartment" trigger="click" get-container="#department" :actions="departmentList"
          @select="onSelectDepartment">
          <template #reference>
            <div class="department-box">
              <span>{{choseDepartment.text}}</span>
              <van-icon v-if="showDepartment" name="arrow-up" />
              <van-icon v-else name="arrow-down" />
            </div>
          </template>
        </van-popover>
      </div>
    </div>
    <div>
      <div class="module" v-for="(v,i) in showList" :key="i">
        <div class="module_title">
          <p>排队号：{{v.queue}}</p>
          <p class="module_title--status">检查状态：{{statusObj[v.status]}}</p>
        </div>
        <div class="module_content">
          <div class="flex-center-between mb8">
            <p style="flex:2"><span class="c-aa label">患者姓名：</span><span class="c-5e">{{v.name}}</span></p>
            <p style="flex:1"><span class="c-aa ">性别：</span><span class="c-5e">{{v.sex}}</span></p>
            <p style="flex:1"><span class="c-aa">年龄：</span><span class="c-5e">{{v.age}}</span></p>
          </div>
          <div class="flex-center-between mb8">
            <p style="flex:2"><span class="c-aa label">住院号：</span><span class="c-5e">{{v.hospitalNumber}}</span></p>
            <p style="flex:2"><span class="c-aa">床号：</span><span class="c-5e">{{v.bedNumber}}</span></p>
          </div>
          <div class="mb8">
            <span class="c-aa label">申请科室：</span><span class="c-5e">{{v.department}}</span>
          </div>
          <div class="mb8">
            <span class="c-aa label">检查项目：</span><span class="c-5e">{{v.project}}</span>
          </div>
          <div class="mb8">
            <span class="c-aa label">身份证号：</span><span class="c-5e">{{v.idCard}}</span>
          </div>
          <div>
            <span class="c-aa label">手机号：</span><span class="c-5e">{{v.phone}}</span>
          </div>
        </div>
        <div class="module_footer">
          <van-button size="small" @click="changeStatus(v,i)" :color="color[v.status + 1]">{{statusObj[v.status + 1]}}
          </van-button>
        </div>
      </div>
    </div>
    <van-popup v-model="showRight" position="right" style="width:60%;height: 100%">
      <div class="avatar">
        <span class="imgBox"> <img src="@/assets/defaultLogo.png" alt=""> </span>
        <span class="avatar_title">叶昊</span>
      </div>
      <van-cell-group>
        <van-cell title-class='title_class' size="large" title="我的擅长" is-link to="/setting"></van-cell>
        <van-cell title-class='title_class' size="large" title="模板录入" is-link to="/entry"></van-cell>
      </van-cell-group>
    </van-popup>

    <van-popup v-model="showBottom" round position="bottom" >
      <div>
        <van-field v-model="ops.message1" rows="4" autosize label="超声描述" type="textarea" placeholder="请输入超声描述" />
        <van-field v-model="ops.message2" rows="4" autosize label="超声提示" type="textarea" placeholder="请输入超声提示" />
      </div>
      <div class="showBottom--footer">
        <van-button round type="default" size="samll" @click="showBottom = false">取消</van-button>
        <van-button round type="info" size="samll">生成模板并且打印</van-button>
      </div>
    </van-popup>
  </div>
</template>

<script>
  export default {
    name: 'MapAppHome',

    data() {
      return {
        ops:{
          message1:"",
          message2:"",
        },
        showPopover: false,
        showDepartment: false,
        showRight: false,
        showBottom: false,
        actions: [{
            text: "全部展示",
            className: "active",
            index: 0,
            status: null,
          },
          {
            text: "等待检查",
            className: "",
            index: 1,
            status: 1,
          },
          {
            text: "开始检查",
            className: "",
            index: 2,
            status: 2,
          },
          {
            text: "完成检查",
            className: "",
            index: 3,
            status: 3,
          }
        ],
        statusObj: {
          1: "等候检查",
          2: "开始检查",
          3: "完成检查",
          4: "返回检查"
        },
        color: {
          2: "#E7A13F",
          3: "#68C23C",
          4: "#419efd"
        },
        choseStatus: {},
        choseDepartment: {},
        departmentList: ["全部", "急诊医学科门诊", "W7心外ICU", "I东心外科", "I1西血管外科", "Z3骨软组织肿瘤病区", "N13心内科CCU",
          "W11心脏大血管外科", "W15胸外科", "东手外科", "V4外科综合病房", "J10神经内科", "W23泌尿外科"
        ],
        list: [{
          queue: "001",
          status: 3,
          name: "韩兴强",
          age: "46岁",
          sex: "男",
          hospitalNumber: "",
          bedNumber: "",
          department: "急诊医学科门诊",
          project: "床旁心脏超声检查",
          idCard: "420102197502023113",
          phone: "15927510192"
        }, {
          queue: "002",
          status: 3,
          name: "苏玉凤",
          age: "65岁",
          sex: "女",
          hospitalNumber: "3203555",
          bedNumber: "016013",
          department: "W7心外ICU",
          project: "床旁心包超声检查",
          idCard: "222326195701089227",
          phone: "18014014949"
        }, {
          queue: "003",
          status: 3,
          name: "魏付华",
          age: "60岁",
          sex: "女",
          hospitalNumber: "",
          bedNumber: "",
          department: "急诊医学科门诊",
          project: "床旁心脏超声检查,床旁心包超声检查,床旁胸",
          idCard: "322302196202026713",
          phone: "15927510192"
        }, {
          queue: "004",
          status: 3,
          name: "朱汉贵",
          age: "71岁",
          sex: "男",
          hospitalNumber: "3209446",
          bedNumber: "960071",
          department: "J10神经内科",
          project: "床旁心脏超声检查",
          idCard: "420102195007050617",
          phone: "13995544292"
        }, {
          queue: "005",
          status: 2,
          name: "付素萍",
          age: "66岁",
          sex: "女",
          hospitalNumber: "3210003",
          bedNumber: "N11122",
          department: "N13心内科CCU",
          project: "床旁心脏超声检查",
          idCard: "420103195511303245",
          phone: "13387518699"
        }, {
          queue: "006",
          status: 1,
          name: "王桃枝",
          age: "63岁",
          sex: "女",
          hospitalNumber: "3203196",
          bedNumber: "W41103",
          department: "W11心脏大血管外科",
          project: "床旁心脏超声检查床旁胸水超声检查",
          idCard: "420123195805030022",
          phone: "18062098551"
        }, {
          queue: "007",
          status: 1,
          name: "程国平",
          age: "68岁",
          sex: "男",
          hospitalNumber: "3205534",
          bedNumber: "231152",
          department: "W23泌尿外科",
          project: "床旁腹水超声检查",
          idCard: "420123195307303710",
          phone: "18507103797"
        }, {
          queue: "008",
          status: 1,
          name: "蔡少南",
          age: "74岁",
          sex: "男",
          hospitalNumber: "3204382",
          bedNumber: "050109",
          department: "W15胸外科",
          project: "床旁胸水超声检查",
          idCard: "420203194710062131",
          phone: "13872051299"
        }, {
          queue: "009",
          status: 1,
          name: "李卫红",
          age: "57岁",
          sex: "女",
          hospitalNumber: "",
          bedNumber: "",
          department: "急诊医学科门诊",
          project: "床旁心脏超声检查",
          idCard: "42010319640312042X",
          phone: "18971351035"
        }, {
          queue: "010",
          status: 1,
          name: "桂美维",
          age: "76岁",
          sex: "女",
          hospitalNumber: "",
          bedNumber: "",
          department: "急诊医学科门诊",
          project: "床旁心脏超声检查",
          idCard: "420102194503191211",
          phone: "17671439028"
        }],
        options: {
          status: "",
          name: "",
          department: "",
        },

        showList: []
      };
    },

    mounted() {
      this.choseStatus = this.actions[0]
      this.echoChoseDate()
      this.departmentList = this.departmentList.map((ele, index) => {
        return {
          text: ele,
          className: index === 0 ? "active" : "",
          index
        }
      })
      this.choseDepartment = this.departmentList[0]

      this.searchList()
    },

    methods: {
      clearSearch() {
        this.options = {
          status: "",
          name: "",
          department: "",
        }
        this.searchList()
      },
      changeStatus(ele, index) {
        if (ele.status == 3) {
          ele.status = 2
        } else {
          ele.status++
        }
        const message =
          `开始检查成功。患者：<span class="active">${ele.name}</span>，项目<span class="active">${ele.project}</span>，是否需要导航`
        if (ele.status == 2) {
          this.$dialog.confirm({
              "message": message,
              "message-align": "left"
            })
            .then(() => {
              this.$router.push("/map")
            })
            .catch(() => {
              // on cancel
            });
        } else if (ele.status == 3) {
          this.showBottom = true
        }
      },
      onSelectDepartment(ele, index) {
        this.choseDepartment.className = ""
        ele.className = "active"
        this.choseDepartment = ele
        this.options.department = ele.text
        this.searchList()
      },
      echoChoseDate() {
        const eles = document.querySelectorAll(".calendar_dot")
        const day = new Date().getDate()
        eles.forEach(ele => {
          if (Number(ele.previousElementSibling.innerText) === day) {
            ele.innerText = "10人"
          } else {
            ele.innerText = "0人"
          }
        })
      },
      clickDate(date) {},
      onSelect(ele, index) {
        this.choseStatus.className = ""
        ele.className = "active"
        this.choseStatus = ele
        this.options.status = ele.status
        this.searchList()
      },
      searchList() {
        const options = this.options
        const ops = {}
        if (options.status) ops.status = options.status
        if (options.name) ops.name = options.name
        if (options.department && options.department !== "全部") ops.department = options.department
        const keyArr = Object.keys(ops)
        let filterArr = []
        if (keyArr.length > 0) {
          filterArr = this.list.filter(ele => {
            let flag = false
            for (const key of keyArr) {
              if (ele[key] == ops[key]) {
                flag = true
              }
            }
            if (flag) return ele
          })
        } else {
          filterArr = this.list.filter(item => item)
        }
        this.showList = filterArr
      }
    },
  };
</script>

<style lang="less">
  .pageTitle {
    font-weight: bold;
    font-size: 30px;
  }

  .bg-Blue {
    background-color: #84c5fb;
    padding: 0 24px 16px 0;
  }

  .active {
    color: red;
  }

  .van-search__action {
    background: #fff;
    border-radius: 4px;
  }

  .title {
    font-weight: bold;
    text-align: center;
    font-size: 28px;
    color: #fff;
    margin-top: 16px;
  }

  .ctrl-img {
    background: #fff;
  }

  .calendar_title {
    background: #fff !important;
    padding-left: 18px !important;
  }

  .calendar_title_date {
    padding-left: 24px;
  }

  .calendar_dot {
    width: auto !important;
    height: auto !important;
    border-radius: 8px !important;
    padding: 3px 4px !important;
    display: inline-block;
    font-size: 14px;
    background: #add9f2;
  }

  .department {
    padding: 24px;
    background: #fff;
    display: flex;
    align-items: center;
    position: relative;

    .van-popover__content {
      height: 200px;
      overflow: auto;
    }

    .van-popover__action {
      width: 200px;
      box-sizing: border-box;
      padding: 12px;
      font-size: 14px;
    }

    .van-popover__action-text {
      justify-content: start;
    }
  }

  .department-box {
    margin-left: 24px;
    height: 70px;
    width: 400px;
    border: 1px solid #e2e2e2;
    border-radius: 48px;
    box-sizing: border-box;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #5b5b5d;
    font-size: 24px;
  }

  .module {
    margin: 24px;
    background: #fff;
    border-radius: 16px;

    .module_title {
      padding: 24px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #f2f2f2;
      font-weight: bold;
      font-size: 30px;

      .module_title--status {
        color: #488cd5;
      }
    }

    .module_content {
      font-size: 28px;
      padding: 12px 24px;
      border: 1px solid #f2f2f2;
    }

    .flex-center-between {
      display: flex;
      align-items: center;
    }

    .label {
      display: inline-block;
      width: 140px;
      text-align: right;
    }

    .c-aa {
      color: #aaaaaa;
    }

    .c-5e {
      color: #5e5e5e;
    }

    .mb8 {
      margin-bottom: 8px;
    }

    .module_footer {
      padding: 24px;
      display: flex;
      justify-content: flex-end;
    }
  }

  .avatar {
    padding: 100px 24px 48px;
    background: white;
    display: flex;
    margin-bottom: 90px;

    .imgBox {
      width: 120px;
      height: 120px;
      border-radius: 50%;
      background: #f0f0f0;
      margin-right: 24px;
      overflow: hidden;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .avatar_title {
      font-size: 30px;
      font-weight: bold;
    }
    
  }
  .showBottom--footer{
    padding: 0 24px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .van-button__text{
      font-size: 14px;
      padding: 4px 16px;
      min-width: 100px;
    }
  }
</style>